<template>
  <el-card class="homeMain-card">
    <template #header>
      <div class="card-header">
        <span>Main</span>
        <el-button plain @click="dialogFormVisible = true"> Open a Form nested Dialog </el-button>
      </div>

      <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="Promotion name" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="Zones" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button>
          </div>
        </template>
      </el-dialog>
    </template>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="#" width="60" />
      <el-table-column prop="mname" label="姓名" width="100" />
      <el-table-column prop="gender" label="性别" width="60" />
      <el-table-column prop="tel" label="电话" />
      <el-table-column prop="birth" label="生日" />
      <el-table-column prop="roleid" label="角色" />
      <el-table-column prop="state" label="状态" />
      <el-table-column label="状态" width="180">
        <template #default="tr">
          <el-switch
            inline-prompt
            @click="statechange(tr.row)"
            v-model="tr.row.state"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            active-text="on"
            inactive-text="off"
          />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>Footer content</template>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $ajax from 'axios'
import { extractDateFormat } from 'element-plus'
const tableData = ref(null)
const dialogFormVisible = ref(false)

const loadrole = async () => {
  const instance = $ajax.create({
    baseURL: 'http://localhost:8080',
    timeout: 5000
  })

  try {
    // const response = await instance.get('/member/list')
    // const res = response.data
    const { data: res } = await instance.get('/member/list')
    if (res.code === 200) {
      tableData.value = res.data
    } else {
      console.log(res.msg)
    }
  } catch (error) {
    console.error(error)
  }
  console.log('loadrole')
  tableData.value.map((row) => {
    row.birth = /\d{4}-\d{1,2}-\d{1,2}/g.exec(row.birth)
    return row.birth
  })
}

onMounted(() => {
  loadrole()
})
</script>

<style lang="scss" scoped>
.homeMain-card {
  width: 100%;
}
</style>
